<template>
  <div class="compilationSummary-tab1">
    <div class="tableBox">
      <el-table
        v-loading="tableLoading"
        :data="tableData0"
        height="85vh"
        style="width: 100%"
        class="tableTh28"
        border
        stripe
        :span-method="arraySpanMethod"
        ref="table"
      >
        <el-table-column
          label="类别(单位：万元)"
          prop="type"
          class-name="first-title"
          min-width="50"
          fixed
        ></el-table-column>
        <el-table-column
          label="类别(单位：万元)"
          prop="class1"
          class-name="first-title"
          min-width="50"
          fixed
        ></el-table-column>
        <el-table-column
          label="类别(单位：万元)"
          prop="class2"
          class-name="second-title"
          min-width="50"
          fixed
        ></el-table-column>
        <el-table-column
          label="类别(单位：万元)"
          prop="verticalIndexName"
          class-name="third-title"
          min-width="100"
          fixed
        ></el-table-column>
        <el-table-column v-for="(item1,index1) in newArr" :label="item1.month" :key="index1">
          <el-table-column
            min-width="100"
            v-for="(item2,index2) in item1.list"
            :key="index2"
            :label="item2.horizonIndexName"
            :prop="'val'+(index1*3+index2)"
          ></el-table-column>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { mergeTableRow, mergeSpan } from "@/utils/mixin";
export default {
  name: "compilationSummary-tab2",
  props: {
    rowData: {
      type: Array,
      default: [],
    },
    colDefList: {
      type: Array,
      default: [],
    },
  },

  data() {
    return {
      spanArr: [],
      tableData0: [],
      tableData1: [],
      tableData2: [],
      colList: [],
      newArr: [],
      tableLoading: false,
      flag: 0,
    };
  },
  
  methods: {
    //table合并行
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      // if(this.tableData0.length>0){
      if (
        columnIndex == 0 ||
        columnIndex == 1 ||
        columnIndex == 2 ||
        columnIndex == 3
      ) {
        return this.spanArr.length && this.spanArr[rowIndex][columnIndex];
      }
      // }
    },

    init() {
      this.newArr = [];
      this.flag = 0;

      this.tableData0 = this.rowData[0];
      this.colList = this.colDefList[0];
      this.classify(this.colList);
      this.spanArr = mergeSpan(this.rowData[0], [
        "type",
        "class1",
        "class2",
        "verticalIndexName",
      ]);
      this.tableData0 = this.rowData[0];
      this.$nextTick(() => {
        this.$refs.table.doLayout();
      });
    },
    classify(arr) {
      // this.newArr=arr;

      let newArr = [];
      this.flag = 0;

      arr.forEach((item, index) => {
        if (index === 0) {
          newArr.push({
            month: item.class1,
            list: [item],
          });
        } else {
          if (arr[index].class1 === arr[index - 1].class1) {
            console.log(this.flag);
            newArr[this.flag].list.push(item);
          } else {
            this.flag += 1;
            newArr.push({
              month: item.class1,
              list: [item],
            });
          }
        }
      });
      this.newArr = newArr;
      console.log(newArr);
    },
  },
};
</script>

<style lang="scss">
.compilationSummary-tab1 {
  .first-title.is-leaf {
    font-size: 0 !important;
    position: relative;
    border-right: 1px solid #d7e5fb !important;
    .cell {
      color: #d7e5fb;
    }
  }
  .second-title.is-leaf {
    font-size: 0 !important;
    position: relative;
    border-right: 1px solid #d7e5fb !important;
    .cell {
      color: #d7e5fb;
    }
  }
  .third-title.is-leaf {
    overflow: visible;
    .cell {
      transform: translateX(-50%);
      white-space: nowrap;
      overflow: visible;
    }
  }
  /deep/ .third-title .cell {
    text-align: center;
  }
}
</style>
